<template>
    <div class="backstage__wrap_hidder">
        <top-header></top-header>
        <div
            class="backstage__wrap"
            :style="{ height: screen_height - 66 + 'px' }"
        >
            <div class="menu">

                <div
                    v-for="(item, index) of menu_list"
                    :key="index"
                    @click="changeBottom(item)"
                    class="backstage__menu--bottom"
                    :class="
                        activeBottom === item.name
                            ? 'backstage__menu_bottom--t'
                            : 'backstage__menu_bottom--f'
                    "
                >
                    {{ item.name }}
                </div>
                <!-- </div> -->
                <!-- <div class="backstage__menu_footer"></div> -->
                <div class="backstage__menu--bottom_Q" @click="logOut">
                    Quite
                </div>
            </div>
            <div class="board">
                <!-- 路由 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import TopHeader from "../../components/TopHeader.vue";
const storeEP = inject("storeEP");


//获取屏幕高度
const screen_height = ref();
onMounted(() => {
    var height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //兼容性获取屏幕高度
    screen_height.value = height;

    window.onresize = () => {
        return (() => {
            screen_height.value =
                window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight; //兼容性获取屏幕高度
        })();
    };
});

// 菜单列表
// const menu_list = reactive({
//     1: { name: "Blog", href: "/backstage/manage-blog" },
//     2: { name: "Files", href: "/backstage/manage-files" },
//     3: { name: "Admin", href: "/backstage/manage-user" },
//     0: { name: "Setting", href: "/backstage/manage-app" },
// });
const menu_list = reactive({
    1: { name: "Blog", href: "/backstage/manage-blog" },
    2: { name: "Files", href: "/code42" },
    3: { name: "Admin", href: "/code42" },
    0: { name: "Setting", href: "/code42" },
});
const router = useRouter();
// 活动菜单 手风琴
const activeBottom = ref("文章");
const changeBottom = (item) => {
    if (activeBottom.value === item.name) {
        activeBottom.value = null;
        setTimeout(() => {
            activeBottom.value = item.name;
        }, 1);
        return;
    }
    activeBottom.value = item.name;
    router.push(item.href);
};
onMounted(() => {
    activeBottom.value = "文章";
    changeBottom(menu_list[1]);
});

// 登出
const store_data = storeEP.state;
const logOut = async () => {
    // 清除用户本地数据
    // token.value = ""
    store_data.user_account = ""
    store_data.token = ""
    store_data.login = ""
    localStorage.removeItem('USER_ACCOUNT')
    localStorage.removeItem('TOKEN')
    // localStorage.removeItem('LOGIN');
    await router.push("/home");
}


// 路由跳转
</script>

<style lang="scss" scoped>
.backstage__wrap_hidder {
    overflow: hidden;
}
// 导航
@keyframes backstage__menu_bottom--t {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-1%, -10%);
    }

    100% {
        transform: translate(0, 0);
        font-weight: 600;
        color: #ad9bd5;
    }
}
.backstage__menu_bottom--t {
    animation-name: backstage__menu_bottom--t;
    animation-duration: 0.2s;
    // animation-fill-mode: both;
    // background-color: blanchedalmond !important;
    // height: 100%;
    // margin-bottom: 0;
    color: var(--main-color-a);
    font-weight: 500 !important;
    white-space: nowrap;
}

// 整体样式
.backstage__wrap {
    max-height: 100vh;
    .menu {
        white-space: nowrap;

        z-index: 1;
        position: absolute;
        margin-left: 200px;
        .backstage__menu--bottom {
            user-select: none;
            display: inline-block;
            width: 100px;
            font-size: 30px;
            text-align: center;
            font-weight: 100;
            // background-color: rgb(53 53 53);
        }
        .backstage__menu--bottom_Q {
            user-select: none;
            display: inline-block;
            width: 100px;
            font-size: 30px;
            text-align: center;
            font-weight: 100;
            // transform: translate(-600px);
            // background-color: rgb(53 53 53);
        }
        .backstage__menu--bottom:hover {
            color: var(--main-color-a);
        }
        .backstage__menu--bottom_Q:hover {
            color: var(--main-color-b);
        }
    }
    .board {
        // flex: 1;
        // background-color: #FFFFFF;
        overflow: hidden;
    }
}
</style>
